<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex flex-center">
        <q-card v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }">
          <q-card-section>
            <q-avatar size="99px" class="absolute-center shadow-10">
              <img src="public/icons/profile.svg" />
            </q-avatar>
          </q-card-section>
          <q-card-section>
            <div class="text-center q-pt-lg">
              <div class="col text-h6 ellipsis">系统登录</div>
            </div>
          </q-card-section>
          <q-card-section>
            <q-form class="q-gutter-md">
              <q-input dense v-model="username" label="账号" />

              <q-input dense type="password" v-model="password" label="密码" />

              <div>
                <q-btn label="登录" class="w-100%" to="/" type="button" color="primary" />
              </div>
            </q-form>
          </q-card-section>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 组件名称
defineOptions({
  name: 'LoginPage',
})

const username = ref('')
const password = ref('')
</script>
